<template>
	<div class="index">
    <div style="padding: 0rem 0rem; position: relative; background: #1989fa; height: 0.9rem;" class="flexcc">
    	<div style="position: absolute; left: 0.3rem; top: 0rem; height: 100%;" class="flexc"><van-icon name="arrow-left" size="0.3rem" style="font-weight: bold;" @click="back()" color="#fff" /></div>
    	<div style="color: #fff;  font-weight: bold;">拜访列表</div>
    </div>
    <div style="padding: 0.3rem;">

      <div style="margin-bottom: 0.3rem;" class="flexbc">
        <van-search style="padding: 0; width: 5rem;"
          v-model="all.khmc"
          placeholder="请输入客户名称"
          @search="search()"
        >
        </van-search>
        <div class="flexc" @click="log1 = true"><van-icon name="filter-o" style="margin-right: 0.1rem;" size="20px" />高级搜索</div>
      </div>

      <div class="yy" v-for="(item,index) in list" :key="index" style="margin-bottom: 0.2rem;" @click="go('/baifang/xiangqing',item.id)">
        <div class="flexbc" style="border-bottom: 1px dashed #ddd;">
          <div style="font-weight: bold; margin-bottom: 0.2rem; font-size: 0.3rem;">{{item.yjtjsj}}</div>
          <div>
            <div style="color: #259b24; " v-if="item.spzt == 0">已审批</div>
            <div style="color: #1989fa; " v-if="item.spzt == 1">待审批</div>
            <div style="color: #f00; " v-if="item.spzt == 2">不通过</div>
          </div>
        </div>

    		<div class="flex" style="padding-top: 0.2rem;">
    			<div style="flex: 1; overflow: hidden;">
            <div style="color: #999; margin-bottom: 0.1rem;">客户姓名/电话</div>
    				<div style="color: #333; margin-bottom: 0.2rem;">{{item.bbfrxm}}/{{item.bbfrlxfs}}</div>

            <div style="color: #999; margin-bottom: 0.1rem;">客户类型/拜访方式</div>
    				<div style="color: #666; margin-bottom: 0.2rem;" ><span>{{item.xlkh}}</span>/{{item.bffs}}</div>
    			</div>

    			<div style="flex: 1; overflow: hidden;">
    				<div style="color: #999; margin-bottom: 0.1rem;">销售负责人</div>
    				<div style="color: #666; margin-bottom: 0.2rem;">{{item.createname}}</div>

            <div style="color: #999; margin-bottom: 0.1rem;">创建时间</div>
            <div style="color: #666; margin-bottom: 0.2rem;">{{item.createtime}}</div>
    			</div>
    		</div>
    	</div>
    </div>

    <van-popup v-model="log1" position="bottom">

      <div style="padding: 0.3rem;">

        <div style="margin-bottom: 0.1rem;">被拜访人姓名：</div>
        <div style="margin-bottom: 0.2rem; flex-wrap: wrap;" class="flexc">
          <van-field v-model="all.bbfrxm" placeholder="请输入被拜访人姓名" />
        </div>
        <div style="margin-bottom: 0.1rem;">被拜访人联系方式：</div>
        <div style="margin-bottom: 0.2rem; flex-wrap: wrap;" class="flexc">
          <van-field v-model="all.bbfrlxfs" placeholder="请输入被拜访人联系方式" />
        </div>
        <div style="margin-bottom: 0.1rem;">销售负责人：</div>
        <div style="margin-bottom: 0.2rem; flex-wrap: wrap;" class="flexc">
          <van-field v-model="all.fzrname" placeholder="请输入销售负责人" />
        </div>

        <div style="margin-bottom: 0.1rem;">拜访方式：</div>
        <div style="margin-bottom: 0.2rem; flex-wrap: wrap;" class="flexc">
          <div @click="changegjzt(item)" class="lact" :class="all.bffs.includes(item)?'lactli':''" v-for="item in genjinzhuangtai" :key="item">{{item}}</div>
        </div>

        <div style="margin-bottom: 0.1rem;">体检时间：</div>
        <div style="margin-bottom: 0.2rem;" class="flexc">
          <van-field readonly v-model="all.yjtjsjStart" style="border: 1px #ddd solid; width: 3rem; padding: 5px 16px; margin-right: 0.1rem;" size="small" placeholder="请选择开始时间" @click="shijianlog3 = true" />-
          <van-field readonly v-model="all.yjtjsjEnd"  style="border: 1px #ddd solid; width: 3rem; padding: 5px 16px; margin-left: 0.1rem;" size="small" placeholder="请选择结束时间" @click="shijianlog4 = true" />
        </div>

        <div style="margin-bottom: 0.1rem;">创建时间：</div>
        <div style="margin-bottom: 0.2rem;" class="flexc">
          <van-field readonly v-model="all.cjsjStart" style="border: 1px #ddd solid; width: 3rem; padding: 5px 16px; margin-right: 0.1rem;" size="small" placeholder="请选择开始时间" @click="shijianlog1 = true" />-
          <van-field readonly v-model="all.cjsjEnd"  style="border: 1px #ddd solid; width: 3rem; padding: 5px 16px; margin-left: 0.1rem;" size="small" placeholder="请选择结束时间" @click="shijianlog2 = true" />
        </div>

        <div class="flexcc">
        	<van-button type="default" size="small" style="margin-right: 0.6rem; padding: 0rem 0.5rem;" @click="chongzhi">重置</van-button>
        	<van-button type="info" size="small" style="padding: 0rem 0.5rem;" @click="search2">确认</van-button>
        </div>
      </div>
    </van-popup>

    <van-popup v-model="shijianlog1" position="bottom" >
    	<van-datetime-picker v-model="all.cjsjStart" type="date" title="选择时间" @confirm="shijianConfirm1" @cancel="shijianCancel1" :min-date="minDate" :max-date="maxDate"  />
    </van-popup>
    <van-popup v-model="shijianlog2" position="bottom" >
    	<van-datetime-picker v-model="all.cjsjEnd" type="date" title="选择时间" @confirm="shijianConfirm2" @cancel="shijianCancel2" :min-date="minDate" :max-date="maxDate"  />
    </van-popup>
    <van-popup v-model="shijianlog3" position="bottom" >
    	<van-datetime-picker v-model="all.yjtjsjStart" type="date" title="选择时间" @confirm="shijianConfirm3" @cancel="shijianCancel3" :min-date="minDate" :max-date="maxDate"  />
    </van-popup>
    <van-popup v-model="shijianlog4" position="bottom" >
    	<van-datetime-picker v-model="all.yjtjsjEnd" type="date" title="选择时间" @confirm="shijianConfirm4" @cancel="shijianCancel4" :min-date="minDate" :max-date="maxDate"  />
    </van-popup>

	</div>
</template>

<script>
  var h = document.documentElement.clientWidth / 7.5 + 'px';
      document.documentElement.style.fontSize = h;
	export default {
		name: 'kehulist',
		data() {
			return {
        list:[],
        all:{
          fzrid:JSON.parse(localStorage.getItem('person')).userid,
          khmc:"",
          bbfrxm:"",
          lxdh:"",
          fzrname:"",
          bffs:[],
          yjtjsjStart:"",
          yjtjsjEnd:"",
          cjsjStart:"",
          cjsjEnd:""
        },
        log1:false,
        shijianlog1:false,
        shijianlog2:false,
        shijianlog3:false,
        shijianlog4:false,

        kehuleixing:['新客户','老客户'],

        genjinzhuangtai:['当面拜访','到店参观','到检','其他'],
			}
		},
		created() {
      this.getlist()



		},
		mounted() {

		},
		methods: {
      chongzhi:function(){
        this.all = {
          fzrid:JSON.parse(localStorage.getItem('person')).userid,
          khmc:"",
          bbfrxm:"",
          lxdh:"",
          fzrname:"",
          bffs:[],
          yjtjsjStart:"",
          yjtjsjEnd:"",
          cjsjStart:"",
          cjsjEnd:""
        }
      },
      changekhlx:function(item){
        this.all.khlx = item
      },
      changegjzt:function(item){
        console.log(this.all.bffs.indexOf(item))
        if(this.all.bffs.includes(item)){
          this.all.bffs.splice(this.all.bffs.indexOf(item),1)
        }else{
          this.all.bffs.push(item)
        }
      },
      changekhly:function(item){
        if(this.all.khly.includes(item)){
          this.all.khly.splice(this.all.khly.indexOf(item),1)
        }else{
          this.all.khly.push(item)
        }
      },
      
      shijianConfirm1:function(val){
        this.all.cjsjStart =  moment(val).format('YYYY-MM-DD')
      	this.shijianlog1 = false
      },
      shijianConfirm2:function(val){
        this.all.cjsjEnd =  moment(val).format('YYYY-MM-DD')
      	this.shijianlog2 = false
      },
      shijianCancel1:function(val){
        this.shijianlog1 = false
      },
      shijianCancel2:function(val){
        this.shijianlog2 = false
      },
      
      search:function(){
        this.getlist()

      },
      search2:function(){
        let obj = JSON.parse(JSON.stringify(this.all))
        obj.bffs = obj.bffs.toString()
        axios.get('/Visit/queryVisitListByCon',{params:obj}).then((response)=>{
        	if (response.data.state == 200) {
            this.list = response.data.data
            this.log1 = false
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },



      getlist:function(){
        let obj = JSON.parse(JSON.stringify(this.all))
        obj.bffs = obj.bffs.toString()
        axios.get('/Visit/queryVisitList',{params:obj}).then((response)=>{
        	if (response.data.state == 200) {
            this.list = response.data.data
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      }
		}
	}
</script>


<style scoped >
  .lact{ padding: 0.1rem 0.3rem; background: #fff; margin-right: 0.2rem; border-radius: 4px; border: 1px #ddd solid; margin-bottom: 0.2rem;}
  .lactli { background: #1989fa !important; color: #fff !important;  border: 1px #1989fa solid !important;}

</style>
